<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/goods-details.css">
</head>

<body>
    <div class="mask"></div>
    <!-- top -->
    <div class="top">
        <div class="top-main">
            <ul>
                <li>
                    <a href="###" id="top-login">登录</a>
                    &nbsp;
                    <a href="###" id="top-register">注册</a>
                </li>
                <li>
                    |
                </li>
                <li>
                    <a href="###">帮助中心</a>
                </li>
                <li>
                    |
                </li>
                <li>
                    <a href="###">下载APP</a>
                </li>
                <li>
                    |
                </li>
                <li id="li-last">
                    <a href="###">资质证照 / 协议规则</a>
                </li>
            </ul>
            <div class="li-menu">
                <span>资质证照</span>
                <span>协议规则</span>
            </div>
        </div>

        <!-- 点击注册出现遮罩层 -->
        <div class="top-mask">
            <span class="span-close"></span>

            <h3>声明与政策</h3>
            <p>
                欢迎您来到小米有品！
            </p>
            <p>
                我们依据最新法律法规要求，制定并更新了
                <a href="###">《隐私政策》</a>、
                <a href="###">《小米有品用户协议》</a>
                以及
                <a href="###">《小米账号使用协议》</a>。
                <br>
                您需阅读并同意相关政策条款方可进行登录。
            </p>
            <a href="###" class="mask-btn mask-btn1"> <em></em> 同意并继续</a>
            <a href="###" class="mask-btn mask-btn2">不同意</a>
        </div>
    </div>

    <!-- header -->
    <div class="header">
        <div class="header-main">
            <div class="header-logo"><a href="index.html" target="_black"></a></div>
            <ul class="header-nav">
                <li>
                    <a href="###">限时抢购</a>
                </li>
                <li>
                    <a href="###">企业采购</a>
                </li>
            </ul>

            <form action="javascript:void(0)" class="search">
                <input type="text" id="header-input" placeholder="搜一搜" autocomplete="off">
                <a href="###"></a>
            </form>
            <div class="shopcar">
                <a href="./shopcart.html"></a>
                <span></span>
            </div>
        </div>
    </div>

    
    <!-- container -->
    <div class="container">
        <div class="con-main">
            <div class="banner">
                <div class="ban-small">
                    <img class="small-active" src="https://img.youpin.mi-img.com/shopmain/fcdc3c54e9100edbdcde87bb43fca3f1.jpg@base@tag=imgScale&F=webp&h=1080&w=1080?w=1080&h=1080" alt="">
                    <img src="https://img.youpin.mi-img.com/shopmain/c6537a7cbf7d4069659d9aa769dfb3be.jpg@base@tag=imgScale&F=webp&h=1080&w=1080?w=1080&h=1080" alt="">
                    <img src="https://img.youpin.mi-img.com/shopmain/336cbd8b97eafb250ec3fd71ac99e886.jpg@base@tag=imgScale&F=webp&h=1080&w=1080?w=1080&h=1080" alt="">
                    <img src="https://img.youpin.mi-img.com/shopmain/69b3d0803f15b64813f2f83e536b2710.jpg@base@tag=imgScale&F=webp&h=1080&w=1080?w=1080&h=1080" alt="">
                </div>
                <div class="ban-list">
                    <div class="list-container">
                        <div class="list-pic pic-active">
                            <img src="https://img.youpin.mi-img.com/shopmain/fcdc3c54e9100edbdcde87bb43fca3f1.jpg@base@tag=imgScale&F=webp&h=166&w=166" alt="">
                        </div>
                        <div class="list-pic">
                            <img src="https://img.youpin.mi-img.com/shopmain/c6537a7cbf7d4069659d9aa769dfb3be.jpg@base@tag=imgScale&F=webp&h=166&w=166" alt="">
                        </div>
                        <div class="list-pic">
                            <img src="https://img.youpin.mi-img.com/shopmain/336cbd8b97eafb250ec3fd71ac99e886.jpg@base@tag=imgScale&F=webp&h=166&w=166" alt="">
                        </div>
                        <div class="list-pic">
                            <img src="https://img.youpin.mi-img.com/shopmain/69b3d0803f15b64813f2f83e536b2710.jpg@base@tag=imgScale&F=webp&h=166&w=166" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <div class="word">
                <div class="word-title">
                    <h4>
                        联想平板小新 Pad/Pad Pro影音娱乐办公学习平板电脑
                    </h4>
                    <p>
                        【家电3c年终盘点】2020明星单品，众筹尖货榜单呈现，年底预售低价清仓，不容错过
                    </p>
                    <span>
                        <a href="###">速戳>>></a>
                        面容指纹识别丨超强电量丨高清摄像头丨高清屏幕
                    </span>
                </div>

                <div class="goods-card">
                    <div class="goods-price">
                        <h3>售价</h3>
                        <span>
                            <i>￥</i>
                            <b>1499</b>
                            <em>起</em>
                            <del>￥1999</del>
                            <p>特价</p>
                        </span>
                    </div>

                    <div class="goods-server">
                        <h3>服务</h3>
                        <ul>
                            <li>
                                <a href="javascript:void(0)"></a>
                                <span>满99元包邮</span>
                                <a href="javascript:void(0)" style="margin-left: 5px;"></a>
                                <span>三方店铺</span>
                            </li>
                            <li>
                                <a href="javascript:void(0)"></a>
                                <span>
                                    支持7天无理由退货 (拆封后不支持)
                                </span>
                            </li>
                            <li>
                                <a href="javascript:void(0)"></a>
                                <span>
                                    由北京讯蓝科技有限公司发货并提供售后
                                </span>
                                <b>
                                    (查看商家资质)
                                </b>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="goods-shop">
                    <div class="place">
                        <h3>配送区域</h3>
                        <span>
                            北京
                        </span>
                        <a href="javascript:void(0)">修改</a>
                    </div>

                    <div class="goods-num">
                        <h3>
                            数量
                        </h3>
                        <button id="reduce">-</button>
                        <input type="text" value="1">
                        <button id="add">+</button>
                    </div>

                    <div class="goods-cart">
                        <button class="btn1"><span></span>加入购物车</button>
                        <button class="btn2">立即购买</button>
                    </div>

                </div>
            </div>


        </div>
    </div>


</body>
<script src="./libs/jQuery.js"></script>
<script src="./javascripts/goods-details.js"></script>
</html>